<style>
    .vux-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 1;
    }
    .weui_cell {
        padding: 5px 15px;
        background: #fff;
    }
    .weui_cell_box {
        padding: 5px 15px;
        background: #fff;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        border-radius: 5px;
    }
    .weui_cells_title {
        color: #000;
    }
    .weui_btn_primary {
        background-color: rgb(43,165,187);
        color: rgb(221,221,221);
    }
    .formBox {
        background-color: rgb(240,240,240);
        margin-top: 60px;
    }
    .weui_dialog_title {
        color: rgb(43,165,187);
        font-weight: bold;
    }
    .weui_btn_dialog.primary {
        color: rgb(43,165,187);
    }
    .weui_input {
        line-height: 30px;
    }
    .weui_toast_text .weui_toast_content {
        color: red;
        font-size: 16px;
    }
    .weui_cell_primary {
        height: 30px;
        line-height: 30px;
    }
    .weui_cell_primary > p {
        color: rgb(169,169,169)
    }
</style>
<template>
    <x-header style="background-color: rgb(43,165,187);" :left-options="{backText: '返回', showBack: true }" :right-options="{showMore: true}">
        <span style=" color: rgb(221,221,221); font-size:14px; ">免费申请微信支付</span>
    </x-header>
    <div class="formBox"> 
        <group>
            <cell title="备注信息(  *  为必填项)"></cell>
        </group>
        <group title="店铺名称  *">
            <x-input :value.sync="queryParams.shopName" placeholder="店铺名称" required v-ref:input></x-input>
        </group>
        <group title="店铺地址  *">
            <x-input :value.sync="queryParams.shopAddress" placeholder="具体到(省、市、区、街道)" required v-ref:input></x-input>
        </group>
        <group title="手机号码  *">
            <x-input :value.sync="queryParams.userPhone" placeholder="请输入11位有效手机号码" required v-ref:input is-type="china-mobile" :show-clear=true ></x-input>
        </group>
        <group title="收款人名称  *">
            <x-input :value.sync="queryParams.userName" placeholder="收款账户名称必须和申请人身份一致" required v-ref:input></x-input>
        </group>
        <group title="开户行  *">
            <x-input :value.sync="queryParams.userBank" placeholder="具体到分支行" required v-ref:input></x-input>
        </group>
        <group title="收款卡号  *">
            <x-input :value.sync="queryParams.userBankCode" placeholder="收款卡号" required v-ref:input></x-input>
        </group>
        <a @click="changePic(list.key)" v-for="list in changeList">
            <div class="weui_cells_title">{{list.title}}</div>
            <div class="weui_cell_box">
                <div class="weui_input">
                    <span style="color: rgb(169,169,169); float: left">请选择小于2M的文件进行上传</span>
                    <span style="float: right">
                        <img :src="src" style="margin-top: 6px;">
                    <span>
                </div>
            </div>
        </a>
        <group style="margin-top: 40px;">
            <x-button type="primary" @click="Regist">免费注册<x-button>
        </group>

        <actionsheet :show.sync="regist" :menus="menus" @on-click-menu="clickMenu" show-cancel cancel-text="取消" ></actionsheet>
        <toast width="80%" :show.sync="show" type="text">{{promptMsg}}</toast>
    </div>
</template>
<script>
    import XHeader from 'vux/dist/components/x-header'
    import Group from 'vux/dist/components/group'
    import XInput from 'vux/dist/components/x-input'
    import XButton from 'vux/dist/components/x-button'
    import Confirm from 'vux/dist/components/confirm'
    import Cell from 'vux/dist/components/cell'
    import Actionsheet from 'vux/dist/components/actionsheet'
    import Toast from 'vux/dist/components/toast'

    export default {
    	components: {
    		XHeader,
            Group,
            XInput,
            XButton,
            Confirm,
            Cell,
            Actionsheet,
            Toast
    	},
        ready (){
            var photograph=`
                <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:right;top: 6px;position: relative;left: -50px; width: 25px;" src="./src/img/photo.png">拍照或录像</div>
            `
            this.menus.photograph= photograph;
            var picture=`
                <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:right;top: 6px;position: relative;left: -50px; width: 25px;" src="./src/img/pic.png">图片图库</div>
            `
            this.menus.picture= picture;
            var iCloud=`
                <div style="background-color: rgb(240,240,240); height: 36px;line-height: 36px;"><img style="float:right;top: 6px;position: relative;left: -50px; width: 25px;" src="./src/img/iCloud.png">iCloud</div>
            `
            this.menus.iCloud= iCloud;
        },
        data: function () {
        	return {
        		queryParams: {
                    shopName: '',
                    shopAddress: '',
                    userPhone: '',
                    userName: '',
                    userBank: '',
                    userBankCode:''
                },
                changeList: [
                    {key: "iCardP",title: "身份证正面照"},
                    {key: "iCardB",title: "身份证背面照"},
                    {key: "charter",title: "申请人营业执照"},
                    {key: "userPic",title: "商户本人手持身份证正面照片"},
                    {key: "shopPic",title: "店铺内镜照片"}
                ],
                menus: {
                    photograph: '',
                    picture: '',
                    iCloud: ''
                },
                show: false,
                regist: false,
                promptMsg: '',
                src: "src/img/add.png"
        	}
        },
        methods: {
            Regist: function() {
                let regPhone= /^1[34578]\d{9}$/;
                let regBankCode= /^\d{16}|\d{19}$/;//只能简单判断银行卡的格式
                if(!this.$refs.input.valid) {
                    this.show= true;
                    this.promptMsg= '您未输入必填项'
                }
                else if(!regPhone.test(this.queryParams.userPhone)) {
                    this.show= true;
                    this.promptMsg= '您输入的手机号码不正确'
                }
                else if(!regBankCode.test(this.queryParams.userBankCode)) {
                    this.show= true;
                    this.promptMsg= '您的银行卡格式不正确,请仔细检查'
                }
                else {
                    //this.$route.router.go({ name: 'XXX'})
                    /*this.$http.post( 注册接口, this.queryParams).then( function (res) {
                        console.log(res)
                    }*/
                }
            },
            changePic: function(key) {
                this.regist= true;
                console.log(key)
            },
            clickMenu: function(key) {
                console.log(key)
            }
        }
    }
</script>